<%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@include file="../WEB-INF/jspf/controlesessao.jspf"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Alterar Cursos</title>
        <script type="text/javascript" src="../js/jquery.js" ></script>
        <script type="text/javascript" src="../js/jquery.validate.js"></script>
        <script type="text/javascript" src="../js/forms.js"></script>
        <script type="text/javascript" src="../js/jquery-ui-1.8.2.custom.min.js" ></script>
        <link rel="stylesheet" href="../css/ui-lightness/jquery-ui-1.8.2.custom.css">
        <link rel="stylesheet" href="../css/forms.css">
        <link rel="stylesheet" type="text/css" media="screen" href="../css/ui.jqgrid.css" />
        <script src="../js/i18n/grid.locale-pt-br.js" type="text/javascript"></script>
        <script src="../js/jquery.jqGrid.src.js" type="text/javascript"></script>

    </head>
    <script>$(document).ready(function(){
        $("#form").validate({
            rules: {
                id_area: {required: true,digits: true
                }
                ,id_tipocurso: {required: true,digits: true
                }
                ,nome_curso: {required: true}
            },
            submitHandler: function(form) {
                salvar(form);
            }
        });
    });
    </script>


    <body>

        <form name="form" id="form" method="post" action="update.jsp" >
            <div id="formulario">
                <fieldset><legend>Dados</legend>
                    <sql:query var="query" dataSource="jdbc/dbo_MicrosoftSQLServer">
                        SELECT  * FROM Cursos where id_curso=?
                        <sql:param value="${param.chave}"/>
                    </sql:query>
                    <c:forEach var="row" items="${query.rows}">
                        <input type="hidden" name="id_curso" size="10" maxlength="10" class="required" value="${row.id_curso}">
                        <p><label class="lbInput">Área<em>*</em></label>
                            <sql:query var="query" dataSource="jdbc/dbo_MicrosoftSQLServer">
                                SELECT  * FROM Areas
                            </sql:query>
                            <select name="id_area" disabled>
                                <option value="">Selecione um valor</option>
                                <c:forEach var="area" items="${query.rows}">
                                    <option value="${area.id_area}" ${area.id_area==row.id_area?'selected':''}>${area.desc_area}</option>
                                </c:forEach>
                            </select>
                        </p>
                        <p><label class="lbInput">Tipo de Curso<em>*</em></label>
                            <sql:query var="queryTipo" dataSource="jdbc/dbo_MicrosoftSQLServer">
                                SELECT  * FROM TipoCursos
                            </sql:query>
                            <select name="id_tipocurso" disabled >
                                <option value="">Selecione um valor</option>
                                <c:forEach var="tipo" items="${queryTipo.rows}">
                                    <option value="${tipo.id_tipocurso}" ${tipo.id_tipocurso==row.id_tipocurso?'selected':''}>${tipo.desc_tipocurso}</option>
                                </c:forEach>
                            </select>
                        </p>
                        <p><label class="lbInput">Curso<em>*</em></label>
                            <input disabled type="text" name="nome_curso" size="60" maxlength="60" class="required" value="${row.nome_curso}">
                        </p>
                        <p>
                            <label>Módulo</label>
                            <sql:query var="queryModulos" dataSource="jdbc/dbo_MicrosoftSQLServer">
                                select * from modulos
                                where id_curso=?
                                <sql:param value="${row.id_curso}"/>
                            </sql:query>
                            <select id="modulo" name="id_modulo">
                                <option value=""> Selecione um módulo</option>
                                <c:forEach var="modulos" items="${queryModulos.rows}">
                                <option value="${modulos.id_modulo}"> ${modulos.desc_modulo}</option>
                                </c:forEach>
                            </select>
                        </p>
                    </c:forEach>
                    <br>
                    <table id="componentes"></table>
                    <div id="pager_componentes"></div>
                    <br>

                    <p>
                        <input class="submit" type="button" value="Listar" onclick="listar('fm_lista_Cursos.jsp')">
                    </p>
                    <div id="ajax_dados" style="display:block">
                    </div>
                    <div id="msg" style="display:none"></div>
                </fieldset>
            </div>
        <input type="hidden" id="token" name="token" value="${sessionScope.token}" /> </form>
    </body>
    <script type="text/javascript">
    var lastsel ;
    $(function(){
        $("#componentes").jqGrid({
            url:'fm_getComponentesGrade.jsp?token=${sessionScope.token}',
            datatype: 'xml',
            mtype: 'POST',
            colNames:[ 'Ordem','Código','Componente'],
            colModel :[
                {name:'ordem_componente', index:'ordem_componente', width:40, align:'center',
                    edittype:"text",editable:true,sortable:false,editrules:{required:true}},
                {name:'codigo_componente', index:'codigocomponente', width:90, align:'center',
                    edittype:"text",editable:true,sortable:false,editrules:{required:true}},
                {name:'desc_componente', index:'desc_componente', sortable:false,width:320,align:'center'}
            ],
            onSelectRow: function(id){
                if(id && id!==lastsel){
                    jQuery('#componentes').jqGrid('restoreRow',lastsel);
                    jQuery('#componentes').jqGrid('editRow',id,true);

                    lastsel=id;
                }
            },
            pager: '#pager_componentes',
            width: 630,
            height: 300,
            rowNum:'auto',
            pgbuttons: false,
            pgtext: false,
            pginput:false,
            viewrecords: true,
            sortname: 'desc_componente',
            sortorder: 'desc',
            editurl: "update.jsp?token=${sessionScope.token}",
            caption: 'Componentes'
        });

        jQuery("#componentes").jqGrid('navGrid','#pager_componentes', {add:false,del:false,edit:true,search:false}, //options
        {width:300,reloadAfterSubmit:true}, // edit options
        {width:300,reloadAfterSubmit:true}, // add options
        {reloadAfterSubmit:true}, // del options
        {} // search options
    );
        $("#modulo").change(function(){
            reloadGrid($(this).val());
        });        
    });

    function reloadGrid(id){
        jQuery("#componentes").jqGrid('setGridParam',{url:"fm_getComponentesGrade.jsp?token=${sessionScope.token}&id_modulo="+id,page:1})
        .trigger('reloadGrid');
    }

    </script>

</html>
